<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-button
        size="small"
        type="primary"
        style="margin-bottom: 10px"
        icon="el-icon-edit"
        @click="handleCreate(null);setPid(1,'0')"
      >添加菜单</el-button>
      <template type="expand">
        <el-table fit :data="list" style="width: 100%" highlight-current-row @row-click="chooseone">
          <el-table-column prop="name" label="菜单名称" width="400">
            <template slot-scope="scope">
              <!-- :style="scope.row.type==1?'padding-right: 5px;margin-left:0px':'padding-right: 5px;margin-left: 20px'" -->
              <i
                :class="scope.row.type==1? getIcon(scope.$index):'el-icon-view'"
                :style="changeStyle(scope.row.type,scope.row.pid)"
              ></i>
              <span
                style="cursor:pointer;"
                @click="show(scope.$index,scope.row.id)"
              >{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="权限标识"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.type==1"
                @click="handleCreate(null);setPid(2,scope.row.id)"
                type="text"
                size="small"
              >添加权限点</el-button>
              <el-button type="text" @click="handlerApiList(scope.row.id)" size="small">查看api权限</el-button>
              <el-button
                type="text"
                @click="handleCreate(scope.row.id);setPid(scope.row.type,scope.row.pid)"
                size="small"
              >查看</el-button>
              <el-button type="text" @click="handleDelete(scope.row.id)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>

    <el-dialog
      v-dialogDrag
      title="编辑权限"
      :visible.sync="permissionFormVisible"
      style="hight:100px;line-height:1px"
    >
      <el-form :model="formData" label-width="90px" style="margin-top:20px">
        <el-form-item label="权限名称">
          <el-input v-model="formData.name" autocomplete="off" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="formData.code" autocomplete="off" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" autocomplete="off" style="width:90%"></el-input>
        </el-form-item>
        <div v-if="type==1">
          <el-form-item label="菜单顺序">
            <el-input v-model="formData.menuOrder" autocomplete="off" style="width:90%"></el-input>
          </el-form-item>
          <el-form-item label="菜单icon">
            <el-input v-model="formData.menuIcon" autocomplete="off" style="width:90%"></el-input>
          </el-form-item>
          <el-form-item label="父目录">
            <el-select v-model="pid" filterable clearable placeholder="请选择父目录" @change="currentSel">
              <el-option
                v-for="item in menuList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-else-if="type==2">
          <el-form-item label="按钮样式">
            <el-input v-model="formData.pointClass" autocomplete="off" style="width:90%"></el-input>
          </el-form-item>
          <el-form-item label="按钮icon">
            <el-input v-model="formData.pointIcon" autocomplete="off" style="width:90%"></el-input>
          </el-form-item>
          <el-form-item label="按钮状态">
            <el-input v-model="formData.pointStatus" autocomplete="off" style="width:90%"></el-input>
          </el-form-item>
        </div>
        <div v-else-if="type==3">
          <el-form-item label="api请求地址">
            <el-input v-model="formData.apiUrl" autocomplete="off" style="width:90%"></el-input>
          </el-form-item>
          <el-form-item label="api请求方式">
            <el-input v-model="formData.apiMethod" autocomplete="off" style="width:90%"></el-input>
          </el-form-item>
          <el-form-item label="api类型">
            <el-input v-model="formData.apiLevel" autocomplete="off" style="width:90%"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="permissionFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate(isEdit)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-dialogDrag
      title="API权限列表"
      :visible.sync="apiDialogVisible"
      style="hight:400px;line-height:1px"
    >
      <el-button
        size="small"
        style="margin-bottom: 10px"
        @click="handleCreate(null);setPid(3,pid)"
        type="primary"
        icon="el-icon-edit"
      >添加api权限</el-button>
      <el-table :data="apiList" fit style="width: 100%;" max-height="250">
        <el-table-column fixed prop="name" label="菜单名称" width="120px"></el-table-column>
        <el-table-column fixed prop="code" label="权限标识" width="200"></el-table-column>
        <el-table-column fixed prop="description" label="描述" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="handleCreate(scope.row.id,scope.row.type);setPid(scope.row.type,scope.row.pid)"
              type="text"
              size="small"
            >查看</el-button>
            <el-button
              @click="handleDelete(scope.row.id);handlerApiList(pid)"
              type="text"
              size="small"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import permissionApi from "@/api/permission";
export default {
  data() {
    return {
      list: [],
      type: 0,
      pid: "",
      formData: {},
      dataList: [],
      pointEnable: {},
      apiList: [],
      menuList: [],
      porder: 0,
      permissionFormVisible: false,
      apiDialogVisible: false,
      isEdit: false // false表示保存，true表示更新
    };
  },

  created() {
    this.getList();
  },

  methods: {
    chooseone(row) {
      //   console.log(row);
    },
    show(index, id) {
      if (!this.pointEnable[id] == null || this.pointEnable[id] == undefined) {
        permissionApi.getList("", id).then(resp => {
          if (resp.data.data.length <= 0) {
            this.$message.error("无子权限");
          } else {
            for (var i = 0; i < resp.data.data.length; i++) {
              this.list.splice(index + i + 1, 0, resp.data.data[i]);
            }
            this.pointEnable[id] = resp.data.data.length;
          }
        });
      } else {
        this.list.splice(index + 1, this.pointEnable[id]);
        this.pointEnable[id] = null;
      }
    },
    // 控制icon显示
    getIcon(index) {
      // console.log(index)
      // console.log(this.list.length)
      if (index < this.list.length - 1) {
        if (this.list[index + 1].type !== 1) {
          //   console.log(this.list[index]);
          return "el-icon-folder-opened";
        } else {
          //   console.log(this.list[index]);
          return "el-icon-folder";
        }
      } else {
        return "el-icon-folder";
      }
    },

    setPid(type, pid) {
      this.pid = pid;
      this.type = type;
      if (this.type == 1) {
        this.getMenuList();
      }
    },

    currentSel() {
      console.log(this.pid);
    },

    handleCreate(id) {
      //   this.getMenuList();
      if (id && id != undefined) {
        this.isEdit = true;
        permissionApi.findPermissionById(id).then(resp => {
          if (resp.data.code == 0) {
            this.formData = resp.data.data;
            this.permissionFormVisible = true;
          }
        });
      } else {
        this.isEdit = false;
        this.formData = {};
        this.permissionFormVisible = true;
      }
    },

    saveOrUpdate(isEdit) {
      this.formData.type = this.type;
      this.formData.pid = this.pid;
      if (this.type == 1) {
        this.formData.menuOrder = parseInt(this.formData.menuOrder);
        this.formData.porder = this.formData.menuOrder;
        // 因为setpid会将formdata的pid设为原来的值，需要通过第三方变量再次赋值
        this.formData.pid = this.pid;
      }
      if (this.type == 2) {
        this.formData.pointStatus = parseInt(this.formData.pointStatus);
      }
      if (isEdit) {
        // 更新
        permissionApi.update(this.formData.id, this.formData).then(resp => {
          if (resp.data.code == 0) {
            this.$message.success("更新权限成功");
            this.formData = {};
            this.permissionFormVisible = false;
          }
          if (this.type == 3) {
            this.handlerApiList(this.pid);
          } else {
            this.getList();
            this.pointEnable = {};
          }
        });
      } else {
        // 保存新增
        permissionApi.save(this.formData).then(resp => {
          if (resp.data.code == 0) {
            this.$message.success("新增权限成功");
            this.formData = {};
            this.permissionFormVisible = false;
          }
          if (this.type == 3) {
            this.handlerApiList(this.pid);
          } else {
            this.getList();
            this.pointEnable = {};
          }
        });
      }
    },

    getList() {
      permissionApi.getList(1, 0).then(resp => {
        if (resp.data.code == 0) {
          this.list = resp.data.data;
          this.pointEnable = {};
        }
      });
    },

    getMenuList() {
      permissionApi.getList(1, "").then(resp => {
        if (resp.data.code == 0) {
          console.log(resp.data);
          this.menuList = resp.data.data;
          let space = {
            id: "0",
            name: "无父目录"
          };
          this.menuList.push(space);
        }
      });
    },

    handlerApiList(id) {
      this.pid = id;
      permissionApi.getList(3, id).then(resp => {
        if (resp.data.code == 0) {
          this.apiList = resp.data.data;
          this.apiDialogVisible = true;
        }
      });
    },

    //动态更改style
    changeStyle(type, pid) {
      if (type == 1 && pid == "0") {
        return "padding-right: 5px;margin-left:0px";
      }
      if (type == 1 && pid !== "0") {
        return "padding-right: 5px;margin-left:10px";
      }
      if (type !== 1) {
        return "padding-right: 5px;margin-left: 20px";
      }
    },

    handleDelete(id) {
      if (id != null && id != "") {
        this.$confirm("此操作将永久删除此权限及其子权限, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            permissionApi.deleteById(id).then(resp => {
              if (resp.data.code == 0) {
                this.$message({
                  message: "删除权限信息成功",
                  type: "success"
                });
                this.getList();
                if (this.type == 3) {
                  this.handlerApiList(this.pid);
                }
                // console.log("子权限："+this.apiList);
              } else {
                this.$message({
                  message: "删除权限信息失败",
                  type: "warning"
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message({
          message: "请选择需要删除的权限哦！",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
span:hover {
  color: #00ade6;
}
</style>